import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import { fetchGetMeetingSpaceInfo, IMeetingInfo } from '@/api/meetingSpace'
import Header from '@/components/Header'
import useStorageEvent from '@/hooks/useStorageEvent'
import useInit from '@/hooks/useInit'
import { getUrlParams } from '@/utils'
import { StyledWrap, StyledMeetingSpaceHeader } from './style'
import Docs from './docs'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'

const meetingMoid = getUrlParams('meetingMoid') ?? ''

const App = () => {
	useInit()
	useStorageEvent()
	const [meetingInfo, setMeetingInfo] = useState<IMeetingInfo>({
		meetingMoid,
		name: '',
		e164: '',
		dateTime: '',
		startTime: '',
		status: null,
		isSigned: false,
		isRecorded: false,
		createBy: '',
	})
	useEffect(() => {
		fetchGetMeetingSpaceInfo(meetingMoid).then((data) => {
			if (data) {
				setMeetingInfo(data)
			}
		})
	}, [])
	return (
		<>
			<WebRecommendBrowser />
			<Header />
			<StyledWrap className="meeting-space-share-wrap">
				<StyledMeetingSpaceHeader>
					<div className="space-title">
						{t('会议空间')}
						<span>{t('会议结束30天后系统自动删除会议文档')}</span>
					</div>
					<div className="space-details">
						<div className="space-details-item">
							<span className="item-label">{t('会议名称')}</span>
							<span className="item-dec">{meetingInfo.name}</span>
						</div>
						<div className="space-details-item">
							<span className="item-label">{t('会议时间')}</span>
							<span className="item-dec">{meetingInfo.dateTime}</span>
						</div>
						<div className="space-details-item">
							<span className="item-label">{t('会议号码')}</span>
							<span className="item-dec">{meetingInfo.e164}</span>
						</div>
					</div>
				</StyledMeetingSpaceHeader>
				<Docs meetingInfo={meetingInfo} />
			</StyledWrap>
		</>
	)
}
export default App
